<template>
  <div id="main">
  	<div id="big_tit">
  		<img src="./modules/images/big-title.png" alt="">
  	</div>
      <div id="mapDiv"></div>
      <div id="refresh">
          <span class="time" id="timeYear">2022</span>年
          <span class="time" id="timeMonth">5</span>月
          <span class="time" id="timeDay">6</span>日
          星期<span id="timeWeekday">二</span>
      </div>
      <!--设备总览 -->
      <div id="sbzl">
  		<div class="horn1">
  			<img src="./modules/images/icons/1-9.png" alt="">
  		</div>
  		<div class="horn2">
  			<img src="./modules/images/icons/1-10.png" alt="">
  		</div>
  		<div class="horn3">
  			<img src="./modules/images/icons/1-11.png" alt="">
  		</div>
  		<div class="horn4">
  			<img src="./modules/images/icons/1-12.png" alt="">
  		</div>
  		<div class="title">
  			<span>设备总览</span>
  		</div>
          <div class="item zm">
  			 <div class="box">
  				 <div class="left">
  				 				<img src="./modules/images/icons/1-1.png" alt="">
  				 </div>
  				 <div class="right">
  					 <div class="numb" id="sbzl-zm">0</div>
  					 <div style="font-size: 14px;color: #d4fcfc;">照明</div>
  				 </div>
  			 </div>
          </div>
          <div class="item jk">
              <!-- <div class="numb" id="sbzl-jk">0</div>
              <div class="title">监控</div> -->
  			<div class="box">
  				 <div class="left">
  								<img src="./modules/images/icons/1-2.png" alt="">
  				 </div>
  				 <div class="right">
  					 <div class="numb" id="sbzl-jk">0</div>
  					 <div style="font-size: 14px;color: #d4fcfc;">监控</div>
  				 </div>
  			</div>
          </div>
          <div class="item cdz">
              <!-- <div class="numb" id="sbzl-cdz">0</div>
              <div class="title">充电桩</div> -->
  			<div class="box">
  				 <div class="left">
  								<img src="./modules/images/icons/1-3.png" alt="">
  				 </div>
  				 <div class="right">
  					 <div class="numb" id="sbzl-cdz">0</div>
  					 <div style="font-size: 14px;color: #d4fcfc;">充电桩</div>
  				 </div>
  			</div>
          </div>
          <div style="margin-top: 31px;">
              <div class="item wifi">
                 <!-- <div class="numb" id="sbzl-wifi">0</div>
                  <div class="title">wifi-AP</div> -->
  				<div class="box">
  					 <div class="left">
  									<img src="./modules/images/icons/1-4.png" alt="">
  					 </div>
  					 <div class="right">
  						 <div class="numb" id="sbzl-wifi">0</div>
  						 <div style="font-size: 14px;color: #d4fcfc;">wifi-AP</div>
  					 </div>
  				</div>
              </div>
              <div class="item xxp">
                  <!-- <div class="numb" id="sbzl-xxpm">0</div>
                  <div class="title">信息屏幕</div> -->
  				<div class="box">
  					 <div class="left">
  									<img src="./modules/images/icons/1-5.png" alt="">
  					 </div>
  					 <div class="right">
  						 <div class="numb" id="sbzl-xxpm">0</div>
  						 <div style="font-size: 14px;color: #d4fcfc;">信息屏幕</div>
  					 </div>
  				</div>
              </div>
              <div class="item yjjg">
                  <!-- <div class="numb" id="sbzl-yjjg">0</div>
                  <div class="title">一键告警</div> -->
  				<div class="box">
  					 <div class="left">
  									<img src="./modules/images/icons/1-6.png" alt="">
  					 </div>
  					 <div class="right">
  						 <div class="numb" id="sbzl-yjjg">0</div>
  						 <div style="font-size: 14px;color: #d4fcfc;">一键告警</div>
  					 </div>
  				</div>
              </div>
          </div>
          <div style="margin-top: 18px;">
              <div class="item gb">
                 <!-- <div class="numb" id="sbzl-gb">0</div>
                  <div class="title">广播</div> -->
  				<div class="box">
  					 <div class="left">
  									<img src="./modules/images/icons/1-7.png" alt="">
  					 </div>
  					 <div class="right">
  						 <div class="numb" id="sbzl-gb">0</div>
  						 <div style="font-size: 14px;color: #d4fcfc;">广播</div>
  					 </div>
  				</div>
              </div>
              <div class="item cgq">
                 <!-- <div class="numb" id="sbzl-cgq">0</div>
                  <div class="title">传感器</div> -->
  				<div class="box">
  					 <div class="left">
  									<img src="./modules/images/icons/1-8.png" alt="">
  					 </div>
  					 <div class="right">
  						 <div class="numb" id="sbzl-cgq">0</div>
  						 <div style="font-size: 14px;color: #d4fcfc;">传感器</div>
  					 </div>
  				</div>
              </div>
          </div>
      </div>
      <!-- 智慧照明 -->
      <div id="zhzm">
  		<div class="horn1">
  			<img src="./modules/images/icons/1-9.png" alt="">
  		</div>
  		<div class="horn2">
  			<img src="./modules/images/icons/1-10.png" alt="">
  		</div>
  		<div class="horn3">
  			<img src="./modules/images/icons/1-11.png" alt="">
  		</div>
  		<div class="horn4">
  			<img src="./modules/images/icons/1-12.png" alt="">
  		</div>
  		<div class="title">
  			<span>智慧照明</span>
  		</div>
          <div id="y_gauge1"></div>
          <div id="y_gauge2"></div>
          <div id="y_gauge3"></div>
  		<div class="progress">
  			<div class="item">
  				<div class="circle"></div>
  				<div class="count">
  					0
  				</div>
  				<div class="name">
  					总安装
  				</div>
  			</div>
  			<div class="item2">
  				<div class="circle"></div>
  				<div class="count">
  					0
  				</div>
  				<div class="name">
  					在线
  				</div>
  			</div>
  			<div class="item3">
  				<div class="circle"></div>
  				<div class="count">
  					0
  				</div>
  				<div class="name">
  					亮灯
  				</div>
  			</div>
  			<div class="item4" style="left: ;">
  				<div class="circle active"></div>
  				<div class="count activeNum">
  					0
  				</div>
  				<div class="name">
  					故障
  				</div>
  			</div>
  		</div>
      </div>
      <!-- 智慧充电 -->
      <div id="zhcd">
  		<div class="horn1">
  			<img src="./modules/images/icons/1-9.png" alt="">
  		</div>
  		<div class="horn2">
  			<img src="./modules/images/icons/1-10.png" alt="">
  		</div>
  		<div class="horn3">
  			<img src="./modules/images/icons/1-11.png" alt="">
  		</div>
  		<div class="horn4">
  			<img src="./modules/images/icons/1-12.png" alt="">
  		</div>
  		<div class="title">
  			<span>智慧充电</span>
  		</div>
  		<div>
  			<div id="cd_num"></div>
  			<span class="tit">累计充电量</span>
  		</div>
  		<div>
  			<div id="cd_money"></div>
  			<span class="tit2">累计金额</span>
  		</div>
      </div>
      <!-- 公共wifi -->
      <div id="ggwf">
  		<div class="horn1">
  			<img src="./modules/images/icons/1-9.png" alt="">
  		</div>
  		<div class="horn2">
  			<img src="./modules/images/icons/1-10.png" alt="">
  		</div>
  		<div class="horn3">
  			<img src="./modules/images/icons/1-11.png" alt="">
  		</div>
  		<div class="horn4">
  			<img src="./modules/images/icons/1-12.png" alt="">
  		</div>
  		<div class="title">
  			<span>公共wifi</span>
  		</div>
          <div id="ggwfChart" style="width: 100%; height: 200px;margin-top:40px;"></div>
      </div>
      <!-- 环境气象 -->
      <div id="hjqx">
  		<div class="horn1">
  			<img src="./modules/images/icons/1-9.png" alt="">
  		</div>
  		<div class="horn2">
  			<img src="./modules/images/icons/1-10.png" alt="">
  		</div>
  		<div class="horn3">
  			<img src="./modules/images/icons/1-11.png" alt="">
  		</div>
  		<div class="horn4">
  			<img src="./modules/images/icons/1-12.png" alt="">
  		</div>
  		<div class="title">
  			<span>环境气象</span>
  		</div>
          <div style="height: 130px;width: 420px;margin: 50px 0 0 10px;; padding: 20px 0 0 10px;display:flex;align-items:center;">
             <div style="display: inline-block;font-size: 52px;color: #fff;">{{temperature}}℃</div>
             <div style="display: inline-block;width:140px;font-size: 30px;color: #fff;margin-left: 25px;">{{city}}<br>{{weather}}</div>
             <div style="display: inline-block;margin-left: 25px"><img id="weatherImg"
                                                                        :src="weatherIcon" alt=""></div>
                                                                        <!-- src="./modules/images/weather/weather_img01.png" alt=""></div> -->
          </div>
      </div>
      <!-- 智能监控 -->
      <div id="znjk">
  		<div class="horn1">
  			<img src="./modules/images/icons/1-9.png" alt="">
  		</div>
  		<div class="horn2">
  			<img src="./modules/images/icons/1-10.png" alt="">
  		</div>
  		<div class="horn3">
  			<img src="./modules/images/icons/1-11.png" alt="">
  		</div>
  		<div class="horn4">
  			<img src="./modules/images/icons/1-12.png" alt="">
  		</div>
  		<div class="title">
  			<span>智能监控</span>
  		</div>
          <div style="height: 160px;width: 420px;margin: 60px 0 0 16px;">
              <div style="width: 295px;height: 160px;float:left;">
  				<!-- <div style="width: 219px;height: 122px;"> -->
  					<img src="./modules/images/jiankong.png" alt="" style="width: 100%;">
  				<!-- </div> -->
              </div>
              <div style="width: 125px;height: 160px;float: right;text-align: center;">
                  <div style="height: 50%;line-height: 79px;font-size: 18px;color: #fff;border:1px solid #144675;">人流量：<span
                              style="color:#04bbef ;">415</span></div>
                  <div style="height: 50%;line-height: 79px;font-size: 18px;color: #fff;border:1px solid #144675;border-top: none;">车流量：<span
                              style="color:#04bbef ;">36</span></div>
              </div>
          </div>
  
      </div>
      <!-- 信息 -->
      <div id="xx">
  		<div class="horn1">
  			<img src="./modules/images/icons/1-9.png" alt="">
  		</div>
  		<div class="horn2">
  			<img src="./modules/images/icons/1-10.png" alt="">
  		</div>
  		<div class="horn3">
  			<img src="./modules/images/icons/1-11.png" alt="">
  		</div>
  		<div class="horn4">
  			<img src="./modules/images/icons/1-12.png" alt="">
  		</div>
  		<div class="title">
  			<span>信息</span>
  		</div>
  		<div style="width: 412px;height: 190px;margin: 50px auto 0; ">
  			<img src="./modules/images/xinxi.png" alt="" style="width: 100%;">
  		</div>
      </div>
      <!--报警与广播 -->
      <div id="bjygb">
  		<div class="horn1">
  			<img src="./modules/images/icons/1-9.png" alt="">
  		</div>
  		<div class="horn2">
  			<img src="./modules/images/icons/1-10.png" alt="">
  		</div>
  		<div class="horn3">
  			<img src="./modules/images/icons/1-11.png" alt="">
  		</div>
  		<div class="horn4">
  			<img src="./modules/images/icons/1-12.png" alt="">
  		</div>
  		<div class="title">
  			<span>报警与广播</span>
  		</div>
          <div style="height: 42px;line-height: 42px;margin: 58px 22px 0 20px; border:1px solid #069;display: flex;align-items: center;padding-left: 10px;">
  			<img src="./modules/images/laba.png" alt="" style="width: 30px;">
  			<!-- <div class="marquee_list" style="font-size: 14px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;color: #5AC5F6;margin-left: 4px;">广播：告别PC增长依赖，联想集团Q1迎来第二增长曲线</div> -->
  		 <!-- 公告循环展示 -->
  		 <div id="J-scroll" class="notice">
  		     <ul class="marquee_list">
  		     </ul>
  		 </div>
  		</div>
          <div style="margin:0 20px;background: #051958;margin-top: 4px; display: block;">
              <table class="table_2" width="100%" cellpadding="6" cellspacing="0">
  
                  <tr class="row1">
                      <td>数据0</td>
                      <td>数据1</td>
                      <td>数据2</td>
                      <td>数据3</td>
                      <td>数据4</td>
                      <td>数据5</td>
                  </tr>
                  <tr class="row2">
                      <td>*****</td>
                      <td>*****</td>
                      <td>*****</td>
                      <td>*****</td>
                      <td>*****</td>
                      <td>*****</td>
                  </tr>
                  <tr class="row2">
                      <td>*****</td>
                      <td>*****</td>
                      <td>*****</td>
                      <td>*****</td>
                      <td>*****</td>
                      <td>*****</td>
                  </tr>
                  <tr class="row1">
                      <td>*****</td>
                      <td>*****</td>
                      <td>*****</td>
                      <td>*****</td>
                      <td>*****</td>
                      <td>*****</td>
                  </tr>
              </table>
          </div>
      </div>
      <!-- 综合告警 -->
      <div id="zhgj">
  		<div class="horn1">
  			<img src="./modules/images/icons/1-9.png" alt="">
  		</div>
  		<div class="horn2">
  			<img src="./modules/images/icons/1-10.png" alt="">
  		</div>
  		<div class="horn3">
  			<img src="./modules/images/icons/1-11.png" alt="">
  		</div>
  		<div class="horn4">
  			<img src="./modules/images/icons/1-12.png" alt="">
  		</div>
  		<div class="title">
  			<span>综合告警</span>
  		</div>
          <div style="margin: 55px 50px;border: 1px solid #069;background:#071753;">
              <table class="table_1" width="100%" cellpadding="6" cellspacing="0">
  
                  <tr class="row1">
                      <td>数据0</td>
                      <td>数据1</td>
                      <td>数据2</td>
                      <td>数据3</td>
                      <td>数据4</td>
                      <td>数据5</td>
                  </tr>
                  <tr class="row2">
                      <td>*****</td>
                      <td>*****</td>
                      <td>*****</td>
                      <td>*****</td>
                      <td>*****</td>
                      <td>*****</td>
                  </tr>
                  <tr class="row2">
                      <td>*****</td>
                      <td>*****</td>
                      <td>*****</td>
                      <td>*****</td>
                      <td>*****</td>
                      <td>*****</td>
                  </tr>
                  <tr class="row2">
                      <td>*****</td>
                      <td>*****</td>
                      <td>*****</td>
                      <td>*****</td>
                      <td>*****</td>
                      <td>*****</td>
                  </tr>
                  <tr class="row2">
                      <td>*****</td>
                      <td>*****</td>
                      <td>*****</td>
                      <td>*****</td>
                      <td>*****</td>
                      <td>*****</td>
                  </tr>
                  <tr class="row1">
                      <td>*****</td>
                      <td>*****</td>
                      <td>*****</td>
                      <td>*****</td>
                      <td>*****</td>
                      <td>*****</td>
                  </tr>
              </table>
          </div>
  
      </div>
      <!--智慧云盒 -->
      <div id="zhyh">
  		<div class="horn1">
  			<img src="./modules/images/icons/1-9.png" alt="">
  		</div>
  		<div class="horn2">
  			<img src="./modules/images/icons/1-10.png" alt="">
  		</div>
  		<div class="horn3">
  			<img src="./modules/images/icons/1-11.png" alt="">
  		</div>
  		<div class="horn4">
  			<img src="./modules/images/icons/1-12.png" alt="">
  		</div>
  		<div class="title">
  			<span>智慧云盒</span>
  		</div>
  		<div style="width: 380px;margin: 57px auto 0;background-color: #051958;">
  			<table class="table_2" width="100%" cellpadding="6" cellspacing="0">
  				<tr>
  					<td>
  						<img src="./modules/images/icons/1-14.png" alt="">
  					</td>
  					<td>
  						<img src="./modules/images/icons/1-14.png" alt="">
  					</td>
  					<td>
  						<img src="./modules/images/icons/1-14.png" alt="">
  					</td>
  					<td>
  						<img src="./modules/images/icons/1-14.png" alt="">
  					</td>
  					<td>
  						<img src="./modules/images/icons/1-14.png" alt="">
  					</td>
  				</tr>
  				<tr>
  					<td>
  						<img src="./modules/images/icons/1-14.png" alt="">
  					</td>
  					<td>
  						<img src="./modules/images/icons/1-13.png" alt="">
  					</td>
  					<td>
  						<img src="./modules/images/icons/1-14.png" alt="">
  					</td>
  					<td>
  						<img src="./modules/images/icons/1-13.png" alt="">
  					</td>
  					<td>
  						<img src="./modules/images/icons/1-14.png" alt="">
  					</td>
  				</tr>
  				<tr>
  					<td>
  						<img src="./modules/images/icons/1-14.png" alt="">
  					</td>
  					<td>
  						<img src="./modules/images/icons/1-14.png" alt="">
  					</td>
  					<td>
  						<img src="./modules/images/icons/1-14.png" alt="">
  					</td>
  					<td>
  						<img src="./modules/images/icons/1-13.png" alt="">
  					</td>
  					<td>
  						<img src="./modules/images/icons/1-14.png" alt="">
  					</td>
  				</tr>
  			</table>
  		</div>
  		<div class="total">
  			<div>
  				<span>连接数：</span>
  				<span class="num">111</span>
  			</div>
  			<div>
  				<span>总流量：</span>
  				<span class="num">111</span>
  			</div>
  		</div>
      </div>
  </div>
</template>
<script>
  import $ from 'jquery'
  import * as echarts from 'echarts';
  import 'echarts-liquidfill'
  import {styleJson2} from './modules/js/mapStyle.js'
  import {dlData} from './modules/js/data.js'
  import markerIcon from './modules/images/ludeng1.png'
  import markerIcon2 from './modules/images/ludeng2.png'
  import turnOnIcon from './modules/images/turn-on.png'
  import turnOffIcon from './modules/images/turn-off.png'
  import lightOn from './modules/images/light-on.png'
  import lightOff from './modules/images/light-off.png'
import { resolve } from 'tinymce';
   export default {
      data(){
        return {
          y_gauge1:{},
          y_gauge2:{},
          y_gauge3:{},
          cd_num:{},
          cd_money:{},
          map:{},
          plan_chart:{},
          plan_option:{},
          turnOn:false,
          timer:null,
          city:'',
          temperature:'',
          weather:'',
          // adcode:'', // 城市编码
          adcode:'410300', // 城市编码
          ip:'', // 用户ip地址
        }
      },
      computed:{
        weatherIcon(){
          switch(this.weather){
            case '晴':
              return require('./modules/images/weather/Sunny.png')
            case  '暴雪':
              return require('./modules/images/weather/Blizzard.png')
            case  '暴雨':
              return require('./modules/images/weather/rainstorm.png')
            case  '暴雨-大暴雨':
              return require('./modules/images/weather/rainstorm1.png')
            case  '大暴雨':
              return require('./modules/images/weather/rainstorm2.png')
            case  '大雪':
              return require('./modules/images/weather/Blizzard2.png')
            case  '大雪-暴雪':
              return require('./modules/images/weather/Blizzard3.png')
            case  '大雨':
              return require('./modules/images/weather/heavyRain.png')
            case  '大雨-暴雨':
              return require('./modules/images/weather/rainstorm3.png')
            case  '冻雨':
              return require('./modules/images/weather/FreezingRain.png')
            case  '多云':
              return require('./modules/images/weather/cloudy.png')
            case  '浮尘':
              return require('./modules/images/weather/FloatingDust.png')
            case  '雷阵雨':
              return require('./modules/images/weather/thunderShower.png')
            case  '雷阵雨并伴有冰雹':
              return require('./modules/images/weather/thunderShower1.png')
            case  '霾':
              return require('./modules/images/weather/Haze.png')
            case  '强沙尘暴':
              return require('./modules/images/weather/StrongSandstorm.png')
            case  '沙尘暴':
              return require('./modules/images/weather/sandStorm.png')
            case  '特大暴雨':
              return require('./modules/images/weather/HeavyRainstorm.png')
            case  '雾':
              return require('./modules/images/weather/fog.png')
            case  '小雪':
              return require('./modules/images/weather/MinorSnow.png')
            case  '小雪-中雪':
              return require('./modules/images/weather/MinorSnow1.png')
            case  '小雨':
              return require('./modules/images/weather/lightRain.png')
            case  '小雨-中雨':
              return require('./modules/images/weather/lightRain1.png')
            case  '扬沙':
              return require('./modules/images/weather/SandBlowing.png')
            case  '阴':
              return require('./modules/images/weather/Yin.png')
            case  '雨夹雪':
              return require('./modules/images/weather/sleet.png')
            case  '阵雪':
              return require('./modules/images/weather/snowShower.png')
            case  '阵雨':
              return require('./modules/images/weather/shower.png')
            case  '中雪':
              return require('./modules/images/weather/moderateSnow.png')
            case  '中雪-大雪':
              return require('./modules/images/weather/moderateSnow1.png')
            case  '中雨':
              return require('./modules/images/weather/moderateRain.png')
            case  '中雨-大雨':
              return require('./modules/images/weather/moderateRain1.png')
          }
        }
      },
      mounted() {
        this.getWeatherInfo()
        let that = this
        window.doSwitch = that.doSwitch
        window.switchTurn = that.switchTurn
        window.netStatus = that.netStatus
        window.lightStatus = that.lightStatus
        window.lampStatus = that.lampStatus
        this.map = new BMapGL.Map("mapDiv");          // 创建地图实例
        var point = new BMapGL.Point(112.51078, 34.70431);  // 创建点坐标
        this.map.setMapStyleV2({styleJson: styleJson2});
        this.map.centerAndZoom(point, 15);
        this.map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
        this.map.setHeading(64.5);   //设置地图旋转角度
        this.loadBjygb()
        this.loadSbzl()
        this.resresh()
        this.timer = setInterval(()=>{
          this.loadLampData()
        },15000)
        this.loadHx()
        this.loadGdsydData()
        
      },
      beforeDestroy() {
        clearInterval(this.timer)
      },
      methods:{
        lightStatus(status){
          if(status == '0'){
            return lightOff
          }else{
            return lightOn
          }
        },
        lampStatus(status){
          if(status == '0'){
            return markerIcon2
          }else{
            return markerIcon
          }
        },
        switchTurn(status){
          if(status == '0'){
            return '开灯'
          }else{
            return '关灯'
          }
        },
        netStatus(status){
          if(status == '1'){
            return '在线'
          }else{
            return '离线'
          }
        },
        loadGdsydData() {
        	//供电所用电
        	var plan_data1 = [];
        	var plan_data2 = [];
        	var plan_xAxis = [];
        	for (var i = 0; i < dlData.length; i++) {
        		var item = dlData[i];
        		plan_xAxis.push(item.date);
        		plan_data2.push(item.yfxt);
        	}
        	this.plan_chart = echarts.init(document.getElementById('ggwfChart'));
        	this.plan_option = {
        		xAxis: {
        			data: plan_xAxis,
        			axisLabel: {
        				textStyle: {
        					color: '#B7E1FF',
        					fontSize: 15
        				}
        			},
        			axisLine: {
        				lineStyle: {
        					color: '#09F'
        				}
        			},
        			axisTick: {
        				lineStyle: {
        					color: '#09F'
        				}
        			}
        		},
        		yAxis: {
        			min: 3.5,
        			max: 4.5,
        			inverse: false,
        			splitArea: { show: false },
        			axisLine: { show: false },
        			axisTick: { show: false },
        			axisLabel: {
        				textStyle: {
        					color: '#B7E1FF',
        					fontSize: 15,
        					fontFamily: 'Arial',
        				}
        			},
        			splitLine: {
        				lineStyle: {
        					color: '#09F'
        				}
        			}
        		},
        		tooltip: {
        			trigger: 'axis',
        			textStyle: {
        				color: '#FFF',
        				fontSize: 20
        			}
        		}, 
        		legend: {
        			show: false,
        			top: 'bottom',
        			textStyle: {
        				color: '#F00',
        				fontSize: 10
        			},
        			data: ['数据']
        		},
        		series: [
        			{
        				name: '数据',
        				type: 'line',
        				smooth: true,
        				symbol: 'circle',
        				symbolSize: 6,
        				showAllSymbol: true,
        				color: '#50fcfc',
        				itemStyle: {
        					normal: {
        						lineStyle: {
        							width: 1.7
        						}
        					}
        				},
        				data: plan_data2
        			},
        
        		]
        	};
        	this.plan_chart.setOption(this.plan_option);
        },
        loadHx(){
        	
        	//环形进度条设置对象	
        var	option_Progress = {
        		title: {
        			text: '目前进度',
        			subtext: '50%',
        			x: 'center',
        			y: 55,
        			itemGap: 10, 
        			textStyle: {
        				color: '#0bddfc',
        				fontWeight: 'normal',
        				fontFamily: '微软雅黑',
        				fontSize: 16
        			},
        			subtextStyle: {
        				color: '#0bddfc',
        				fontWeight: 'bolder',
        				fontSize: 14,
        				fontFamily: '微软雅黑'
        			},
        		
        		},
        		series: [{
        			type: 'pie',
        			center: ['50%', '50%'],
        			radius: [35, 50],
        			x: '0%',
        			tooltip: { show: false },
        			data: [{
        				name: '达成率',
        				value: 79,
        				itemStyle: { color: 'rgba(0,153,255,0.8)' },
        				hoverAnimation: false,
        				label: {
        					show: false,
        					position: 'center',
        					textStyle: {
        						fontFamily: '微软雅黑',
        						fontWeight: 'bolder',
        						color: '#B7E1FF',
        						fontSize: 24
        					}
        				},
        				labelLine: {
        					show: false
        				}
        			},
        			{
        				name: '79%',
        				value: 21,
        				itemStyle: { color: 'rgba(0,153,255,0.1)' },
        				hoverAnimation: false,
        				label: {
        					show: false,
        					position: 'center',
        					padding: 20,
        					textStyle: {
        						fontFamily: '微软雅黑',
        						fontSize: 24,
        						color: '#B7E1FF'
        					}
        				},
        				labelLine: {
        					show: false
        				}
        			}]
        		},
        		{
        			type: 'pie',
        			center: ['50%', '50%'],
        			radius: [55, 60],
        			x: '0%',
        			hoverAnimation: false,
        			data: [{
        				value: 100,
        				itemStyle: { color: 'rgba(0,153,255,0.3)' },
        				label: { show: false },
        				labelLine: { show: false }
        			}]
        		},
        		{
        			type: 'pie',
        			center: ['50%', '50%'],
        			radius: [19, 20],
        			x: '0%',
        			hoverAnimation: false,
        			data: [{
        				value: 100,
        				itemStyle: { color: 'rgba(0,153,255,0.3)' },
        				label: { show: false },
        				labelLine: { show: false }
        			}]
        		}]
        	}
        
        	var option_water = {
        		 series: [{
        		        type: 'liquidFill',
        		        data: [0.8],
        				label:{
        					fontSize:19,
        					color:'#fff'
        				},
        				color:['#5BC5F6'],
        				backgroundStyle:{
        					color:"#153067"
        				},
        				outline: {
        				        }
        		    }]
        	}
        	var option_water2 = {
        		 series: [{
        		        type: 'liquidFill',
        		        data: [0.4],
        				label:{
        					fontSize:19,
        					color:'#fff',
        					formatter:'100元'
        					
        				},
        				color:['#DF983D'],
        				backgroundStyle:{
        					color:"#153067"
        				},
        				outline: {
        				        }
        		    }]
        	}
        	
        	
        	this.y_gauge1 = echarts.init(document.getElementById('y_gauge1')); 
        	this.y_gauge2 = echarts.init(document.getElementById('y_gauge2')); 
        	this.y_gauge3 = echarts.init(document.getElementById('y_gauge3')); 
        	this.cd_num = echarts.init(document.getElementById('cd_num')); 
        	this.cd_money = echarts.init(document.getElementById('cd_money')); 
          var maxg=100;
          var n1=Math.round(Math.random()*100).toFixed(2);
          var n2=Math.round(Math.random()*100).toFixed(2);
          var n3=Math.round(Math.random()*100).toFixed(2);
          //年进度条
          option_Progress.title.subtext ="亮灯率";
          option_Progress.series[0].data[0].value = n1;
          option_Progress.title.text =n1+"%";
          option_Progress.series[0].data[1].value =(maxg-n1);
          this.y_gauge1.setOption(option_Progress);
          option_Progress.title.subtext ="节能率";
          option_Progress.series[0].data[0].value = n2;
          option_Progress.title.text=n2+"%";
          option_Progress.series[0].data[1].value =(maxg-n2);
          this.y_gauge2.setOption(option_Progress);
          option_Progress.title.subtext ="在线率";
          option_Progress.series[0].data[0].value = n3;
          option_Progress.title.text =n3+"%";
          option_Progress.series[0].data[1].value =(maxg-n3);
          this.y_gauge3.setOption(option_Progress);
          this.cd_num.setOption(option_water);
          this.cd_money.setOption(option_water2);
        },
        loadLampData() {
          var base_url = window._CONFIG['domianURL'];
          let that = this
        	$.ajax({
        		type : 'POST',
        		async: false,   // async, avoid js invoke pagelist before jobId data init
        		url : base_url + '/corp/lamp/allList',
        		data : {},
        		dataType : "json",
        		success : function(data){
        			if (data.code == 200) {
        
        				let lampData = data.result;
        				if(lampData.length>0){
        					var point=new BMapGL.Point(lampData[0].gwlongitude, lampData[0].gwlatitude);
        					that.map.centerAndZoom(point, 15);
        				}
        				that.map.clearOverlays(); //删除所有点
        				for (var i = 0; i < data.result.length; i++) {
        					let lamp = lampData[i];
        					let marker = 'marker' + i; //动态生成变量名
        					let point = 'point' + i; //动态生成变量名
        					let opts = 'opts' + i; //动态生成变量名
        					let infoWindow = 'infoWindow' + i; //动态生成变量名
                  var myIcon =  new BMapGL.Icon(lampStatus(lamp.onStatus), new BMapGL.Size(23, 25))
        					// 创建点标记
        					window[point] = new BMapGL.Point(lamp.gwlongitude,lamp.gwlatitude); //给变量赋值
        					// 在地图上添加点标记
        					// window[marker] = new BMapGL.Marker(window[point]); //给变量赋值
        					window[marker] = new BMapGL.Marker(window[point],{
                    icon:myIcon
                  }); //给变量赋值
        					that.map.addOverlay(window[marker]); //使用变量
        					// 创建信息窗口
        					window[opts] = {
        						width: 370,
        						height: 120,
                    left:0,
        						title: `<div style="display:flex;padding-right:50px;align-items:center;height:50px;">
                      <div style="font-size:16px;">${lamp.name}</div>
                      <div style="margin-left:-49px;margin-top:-4px;">
                      <div style="margin-left:59px;">
                        <img style="width:24px;height:24px;" src="${lightStatus(lamp.onStatus)}"/>
                      </div>
                      </div>
                    </div>`,
        						panel : "panel", //检索结果面板
        						enableAutoPan : true, //自动平移
        						searchTypes :[
        						]
        					};
        					var btnText ="未知";
        					var statusText='';
        					if (lamp.onStatus=='0'){
        						btnText="开";
        						statusText="已关闭";
        					}
        					if (lamp.onStatus=='1') {
        						btnText="关";
        						statusText="已开启";
        					}
                  	var content = `
                    <div style="width:70%;margin-top:10px;height:1px;background:#0000000f;margin-left:-1px;"></div>
                    <table style="width:100%;height:80px;margin-top:10px;">
                      <tr>
                        <td style="text-align:left;width:50%;"><span>网络状态：</span><span>${netStatus(lamp.olStatus) }</span></td>
                        <td style="text-align:center;width:50%;"><span>灯控亮度：</span><span>${lamp.bri}%</span></td>
                      </tr>
                      <tr>
                        <td style="text-align:left;width:50%;"><span>路灯电压：</span><span>${lamp.volt} V</span></td>
                        <td style="text-align:center;width:50%;"><span>路灯电流：</span><span>${lamp.curr} A</span></td>
                      </tr>
                      <tr>
                        <td style="text-align:left;width:50%;"><span>路灯功率：</span><span>${lamp.actp} W</span></td>
                        <td style="width:50%;position:relative;">
                          <div style="border:1px solid #ccc;cursor:pointer;width:80px;border-radius:6px;text-align:center;position:absolute;right:53px;top:3px;height:30px;line-height:30px;display:flex;align-item:center;justify-content:center;background:#0767b3;" onclick=doSwitch("${lamp.id}","${lamp.onStatus}")>
                            <span style="vertical-align:middle;color:#fff;">${switchTurn(lamp.onStatus)}</span>
                          </div>
                        </td>
                      </tr>
                    </table>
                    `;
                    
        					window[infoWindow] = new BMapGL.InfoWindow(content, window[opts]);//使用变量
        					// 点标记添加点击事件
        					window[marker].addEventListener('click', function () {
        						that.map.openInfoWindow(window[infoWindow], window[point]); // 开启信息窗口
        					});
        				}
        			} else {
        			}
        		},
        	});
        },
        doSwitch(id,onStatus) {
            let that = this
        	if(confirm("确认要"+(onStatus == '0'?'开启':'关闭')+"?")) {
            var base_url = window._CONFIG['domianURL'];
            var token = JSON.parse(localStorage.getItem('pro__Access-Token')).value
        		$.ajax({
        			type: 'GET',
        			async: false,   // async, avoid js invoke pagelist before jobId data init
        			url: base_url + '/corp/lamp/control?id=' + id + '&on=' + (onStatus == '0' ? '1' : '0'),
        			data: {},
               beforeSend:function(request){
                    request.setRequestHeader("X-Access-Token",token);
                  },
        			dataType: "json",
        			success: function (data) {
        				if (data.code == 200) {
        					alert("操作成功！");
        				} else {
                  alert(data.message)
        				}
               setTimeout(()=>{
                  that.loadLampData()
               },2000)
        			},
        		});
        	}
        },
        getWeatherInfo(){
          let that = this
          $.ajax({
            type : 'GET',
            async: false,   // async, avoid js invoke pagelist before jobId data init
            url : 'https://restapi.amap.com/v3/weather/weatherInfo?key=f2af4af07aec0c7ba99fd57e112d0903&city='+that.adcode,
            data : {},
            dataType : "json",
            success : function(data){
              if (data.status == 1) {
                that.city = data.lives[0].city
                that.weather = data.lives[0].weather
                that.temperature = data.lives[0].temperature
              } else {
          
              }
            },
          });
        },
        getCityCode(){
          let that = this
          new Promise((resolve,reject)=>{
           let that = this
           let _script = document.createElement('script');
           _script.setAttribute('charset', 'utf-8');
           _script.setAttribute('type', 'text/javascript');
           _script.setAttribute('src', 'https://pv.sohu.com/cityjson?ie=utf-8');
           document.getElementsByTagName('head')[0].appendChild(_script);
           _script.onload = function () {
               const res = {'ip':returnCitySN['cip']}
                resolve(res)
           };
          }).then(res=>{
            that.ip = res.ip
            $.ajax({
              type : 'GET',
              async: false,   // async, avoid js invoke pagelist before jobId data init
              url : 'https://restapi.amap.com/v3/ip?key=f2af4af07aec0c7ba99fd57e112d0903&ip='+that.ip,
              data : {},
              dataType : "json",
              success : function(data){
                console.log(data)
                if (data.status == 1) {
                  if(data.adcode.length > 0){
                    that.adcode = data.adcode
                  }else{
                  }
                  that.getWeatherInfo()
                } else {
                  that.getWeatherInfo()
                }
              },
            });
          })
        },
        // 设备总览
        loadSbzl() {
          var base_url = window._CONFIG['domianURL'];
          $.ajax({
            type : 'POST',
            async: false,   // async, avoid js invoke pagelist before jobId data init
            url : base_url + '/corp/lamp/deviceOverview',
            data : {},
            dataType : "json",
            success : function(data){
              if (data.code == 200) {
                document.getElementById('sbzl-zm').innerText = data.result.zm;
                for(let key in data.result){
                  document.getElementById('sbzl-'+key).innerText = data.result[key];
                }
              } else {

              }
            },
          });
        },
        // 报警与广播
        loadBjygb(){
        	var data = ["广播：告别PC增长依赖，联想集团Q1迎来第二增长曲线","111111111111111","333333333"]
        	var ul = document.querySelector(".marquee_list")
        	var index = 0
        	for(var str of data){
        		var li = document.createElement("li")
        		li.innerText = str
        		ul.appendChild(li)
        	}
        	this.simpleScroll({
        	      wrapNode: '#J-scroll',
        	      line: 1,
        	      duration: 1500,
        	      speed: 500
        	    });
        
        },
      // 公告循环滚动
        simpleScroll(opts) {
      	  var opts = $.extend({
      	    wrapNode: '',   //父节点
      	    listNode: 'ul', //列表节点
      	    itemNode: 'li', //单个节点
      	    speed: 500,     //滚动速度
      	    duration: 2000, //间隔时间(毫秒)
      	    line: 1         //滚动行数
      	  }, opts);
      	
      	  var $list = $(opts.wrapNode).find(opts.listNode),
      	    lineH = $list.find(opts.itemNode + ":first").height(),
      	    upHeight = 0 - opts.line * lineH;
      	
      	  var scrollUp = function () {
      	    $list.animate({
      	      marginTop: upHeight
      	    }, opts.speed, function () {
      	      for (var i = 0; i < opts.line; i++) {
      	        $list.find(opts.itemNode + ":first").appendTo($list);
      	      }
      	      $list.css({ marginTop: 0 });
      	    });
      	  }
      	  window.setInterval(scrollUp, opts.duration);
      	},
        //前面补0
       insertZero(n) {
        	var no = "000000" + n.toString();
        	return no.substring(no.length - 2);
        },
        resresh() {
        	var myDate = new Date();
        
        	// $('#refresh').html("<img src=\"images/wait.gif\" align=\"absmiddle\"><span>数据刷新中...</span>");
        	$('#currentDate').html(myDate.getFullYear() + "/" + this.insertZero(myDate.getMonth() + 1) + "/" + this.insertZero(myDate.getDate()));
        	$('#timeYear').html(myDate.getFullYear());
        	$('#timeMonth').html(this.insertZero(myDate.getMonth() + 1));
        	$('#timeDay').html(this.insertZero(myDate.getDate()));
        	var week;
        	switch (myDate.getDay()) {
        		case 1:
        			week = "一";
        			break;
        		case 2:
        			week = "二";
        			break;
        		case 3:
        			week = "三";
        			break;
        		case 4:
        			week = "四";
        			break;
        		case 5:
        			week = "五";
        			break;
        		case 6:
        			week = "六";
        			break;
        		case 0:
        			week = "日";
        			break;
        		default:
        			break;
        	}
        	$('#timeWeekday').html(week);
        }
      },
  }
</script>


<style>
  /* @import url("./modules/css/easyui.css"); */
  @import url("./modules/css/room.css");
  .BMap_bubble_title{
    overflow: visible!important;
  }
</style>